<template>
	<view class="h-screen flex flex-col">
		<view class="box-nav flex flex-col justify-between">
			<view></view>
			<view class="flex pb-12">
				<view class="text-white flex-1 flex justify-center items-center" :class="[tab==i?'font-bold':'']"
					v-for="e,i in tabList" :key="i" @click="handleTab(i)">
					<text class="text-sm">{{e}}</text>
				</view>
			</view>
		</view>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full" :scroll-into-view="scrollId">
				<view class="px-20">
					<ConstellationVue id="star"></ConstellationVue>
					<EmotionVue id="test"></EmotionVue>
					<CardVue id="card"></CardVue>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
	} from 'vue';
	import EmotionVue from './components/test/Emotion.vue';
	import ConstellationVue from './components/test/Constellation.vue';
	import CardVue from './components/test/Card.vue';
	// uni.redirectTo({
	// 	url: `/pages/msg/privateChat`
	// })
	const tab = ref(0)
	const scrollId = ref("")
	const tabList = ["测试", "问答", "星盘", "AI", "塔罗"]

	const handleTab = (i) => {
		console.log(i)
		if (i == 0) {
			scrollId.value = 'test'
		} else if (i == 1) {
			scrollId.value = 'qa'
		} else if (i == 2) {
			scrollId.value = 'star'
		} else if (i == 3) {
			scrollId.value = 'ai'
		} else if (i == 4) {
			scrollId.value = 'card'
		}
	}
</script>

<style lang="less" scoped>
	.box-nav {
		background: url(/static/test/bg_nav.png) no-repeat;
		width: 100%;
		height: 140rpx;
		background-size: cover;
	}
</style>